<template>
  <div>
    <div v-if="showList">
      <el-button class="add" type="primary" @click="addScheme()"
        >+添加方案</el-button
      >
      <el-table :data="grades">
        <el-table-column
          prop="gradeCode"
          label="方案名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gradeName"
          label="适用范围"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sort"
          label="适用人数"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" prop="createTime" align="center">
          <template slot-scope="scope">
            <span class="org-oper">
              <el-link size="mini" type="success" @click="handleDetails(scope.row)"
                >查看</el-link
              >
              <el-link size="mini" type="primary" @click="handleUpdate()"
                >修改</el-link
              >
              <el-link
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                v-hasPermi="['organization:grade:remove']"
                >删除</el-link
              >
            </span>
          </template>
        </el-table-column>
      </el-table>
      <edit  v-if="dialogForm" :dialogForm="dialogForm" @close="closeDialog"></edit>
      <add-scheme
      v-if="addDialogForm"
        :addDialogForm="addDialogForm"
        @closeAdd="closeAddDialog"
      ></add-scheme>
    </div>
    <div v-else>
         <detail v-if="detailData.open" :prop="detailData" @close="closeDetail"></detail>
    </div>
  </div>
</template>

<script>
import edit from "./edit.vue";
import AddScheme from "./addScheme.vue";
import detail from './detail.vue'
export default {
  name: "salaryScheme",
  components: { edit, AddScheme,detail },
  data() {
    return {
      showList: true,
      dialogForm: false,
      addDialogForm: false,
        detailData:{
        open:false,
        employeeId:null,
        employeeCode:null,
      },
      tableData: [
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
        {
          id: "12987122",
          name: "王小虎",
          amount1: "234",
          amount2: "3.2",
          amount3: 10,
        },
      ],
      queryParams: {
        employeeCode: null,
        employeeName: null,
        employeeTel: null,
        employeeJoinStatus: null,
        employeeFormalStatus: null,
        employeeLeaveStatus: null,
        employeeRetiredStatus: null,
        current: 1, //当前页码
        size: 10, //每页显示数量
      },
      grades: [
        {
          gradeCode: "教职员工薪酬方案",
          gradeName: "四川城院/计算机学院、四川城院/金融学院、四川城院职能部门",
          sort: "534224",
        },
      ],
    };
  },
  methods: {
   
    clickReset() {
      this.reset = !this.reset;
    },
    resetQuery() {
      this.queryParams = {
        employeeCode: null,
        employeeName: null,
        employeeTel: null,
        employeeStatus: "2",
        size: 10,
        current: 1,
      };
      this.getPageList();
    },
    // 翻页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getPageList();
    },
    handleUpdate() {
      this.dialogForm = true;
    },
    closeDialog(params) {
      this.dialogForm = params;
    },
    addScheme() {
      this.addDialogForm = true;
    },

    closeAddDialog(params) {
      this.addDialogForm = params;
    },
    handleDetails(row){
      this.showList = false
      this.detailData = {open:true,employeeId:row.employeeId,employeeCode:row.employeeCode}
    },
     closeDetail(){
       this.showList = true
      this.detailData = {open:false,employeeId:null,employeeCode:null}
    }
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 20px;
}
.el-tabs {
  margin: 0 20px;
}
.el-tabs__item {
  font-size: 16px;
  font-weight: bold;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-link {
  margin: 10px;
}
.add {
  float: right;
  margin: 20px;
}
</style>

